<!-- 切换经销商
 @description
 @fileName index.vue
 @author zengqiongying
 @created 2022-07-27 16:31:34
-->
<template>
  <div class="mine-container">
    <MineHeader arrow title="切换经销商" />
    <div class="business-list">
      <div
        v-for="(item,i) in list"
        :key="i"
        class="list"
        @click="handleClick(item)"
      >
        <span class="name">{{ item.customerName }}</span>
        <span v-if="item.customerCode === activeCode" class="state">使用中</span>
      </div>
    </div>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import { getCurrentCustomerList, changeCurrentCustomer } from '@/apis/customerSelector'
export default {
  name: 'BusinessList',
  components: {
    MineHeader
  },
  data() {
    return {
      activeCode: this.$route.query.code || '',
      list: []
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    handleClick(item) {
      const { customerCode } = item
      this.$dialog.confirm({
        title: '切换经销商',
        message: '确定要切换为当前所选经销商吗？',
        confirmButtonColor: 'rgb(0, 200, 180)'
      }).then(() => {
        changeCurrentCustomer(customerCode).then(res => {
          this.activeCode = customerCode
        })
      })
    },
    getListData() {
      getCurrentCustomerList().then(res => {
        this.list = res.data || []
      })
    }
  }
}

</script>
<style lang='less' scoped>
.business-list{
  padding: 16px;
  .list{
    padding: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.0200);
    border-radius: 10px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    .name{
      flex: 1;
      line-height: 22px;
      font-size: 16px;
      color: #333333;
    }
    .state{
      margin-left: 10px;
      font-size:14px;
      color: #62CA58;
      line-height: 20px;;
    }
  }
}
</style>
